<!-- 22 create by hxg 2021/12/13  -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="getList">{{
        $t("common_query")
      }}</a-button>
    </a-space>
    <t-query-form
      layout="inline"
      ref="queryForm"
      group="WipByOperationBoxPallet"
      :model="queryForm"
    >
      <a-row :gutter="[16, 0]">
        <a-col :span="8">
          <a-form-item
            :label="$t('T9_shopId')"
            name="shopId"
            prop="shopId"
            :rules="{
              required: true,
              message: $t('T9_shopId'),
              trigger: 'change',
            }"
          >
            <a-select
              v-model:value="queryForm.shopId"
              class="select-width"
              @change="changeShopId"
            >
              <a-select-option
                v-for="item in shopIdArr"
                style="width: 70%"
                :key="item"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('T9_productId')"
            name="productId"
            prop="productId"
          >
            <a-select
              v-model:value="queryForm.productId"
              style="width: 70%"
              class="select-width"
              show-search
              @change="changeProductId"
            >
              <a-select-option
                v-for="item in productIdArr"
                :key="item.productId"
                :value="item.productId"
              >
                {{ item.productId }}
              </a-select-option>
            </a-select>
            <a-input
              v-model:value="queryForm.productDsc"
              style="width: 25%; margin-left: 5%"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('T9_route')" name="route" prop="route">
            <a-select
              v-model:value="queryForm.route"
              style="width: 70%"
              class="select-width"
              show-search
              @change="changeRoute"
            >
              <a-select-option
                v-for="item in routeArr"
                :key="item.route"
                :value="item.route"
              >
                {{ item.route }}
              </a-select-option>
            </a-select>
            <a-input
              v-model:value="queryForm.routeDsc"
              style="width: 25%; margin-left: 5%"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('T9_operation')"
            name="operation"
            prop="operation"
          >
            <a-select
              v-model:value="queryForm.operation"
              style="width: 70%"
              class="select-width"
              show-search
              @change="changeOperation"
            >
              <a-select-option
                v-for="item in operationArr"
                :key="item.description"
                :value="item.description"
              >
                {{ item.description }}
              </a-select-option>
            </a-select>
            <a-input
              v-model:value="queryForm.operationDsc"
              style="width: 25%; margin-left: 5%"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('T9_eqpId')" name="eqpId" prop="eqpId">
            <a-select
              v-model:value="queryForm.eqpId"
              style="width: 70%"
              class="select-width"
              show-search
            >
              <a-select-option
                v-for="item in eqpIdArr"
                :key="item"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('T9_recipeName')"
            name="recipeName"
            prop="recipeName"
          >
            <a-select
              v-model:value="queryForm.recipeName"
              style="width: 70%"
              class="select-width"
              show-search
            >
              <a-select-option
                v-for="item in recipeNameArr"
                :key="item"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
      style="justify-content: flex-start;"
    >
      <a-col :span="3" class="global-oper-row-title">{{
        $t("T9_recipeList")
      }}</a-col>
      <a-col :span="6">
        <div class="inputArea">
          <span>{{ $t("T9_consumableType") }}</span>
          <a-input v-model:value="consumableType" disabled style="margin-left:10px" />
        </div>
      </a-col>
    </a-row>
    <t-table :data="table.recipeList" class="mytable-style">
      <t-column field="shopId" :title="$t('T9_shopId')" />
      <t-column field="productId" :title="$t('T9_productId')" />
      <t-column field="productVer" :title="$t('T9_productVer')" />
      <t-column field="route" :title="$t('T9_route')" />
      <t-column field="operation" :title="$t('T9_operation')" />
      <t-column field="eqpId" :title="$t('T9_eqpId')" />
      <t-column field="recipeName" :title="$t('T9_recipeName')" />
      <t-column field="runMode" :title="$t('T9_runMode')" />
      <t-column field="ppid" :title="$t('T9_ppid')" />
      <t-column field="consumableType" :title="$t('T9_consumableType')" />
    </t-table>
    <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_recipeIdInfo")
      }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button type="primary">{{ $t("t9_export") }}</a-button>
      </a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button>{{ $t("t9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <t-table :data="table.recipeIdInfoList">
      <t-column field="eqpId" :title="$t('T9_eqpId')" />
      <t-column field="recipeName" :title="$t('T9_recipeName')" />
      <t-column field="localMachineName" :title="$t('T9_localMachineName')" />
      <t-column field="serialNo" :title="$t('T9_serialNo')" />
      <t-column field="bcSerialNo" :title="$t('T9_bcSerialNo')" />
      <t-column field="recipeIdLength" :title="$t('T9_recipeIdLength')" />
      <t-column field="bcRecipeIdLength" :title="$t('T9_bcRecipeIdLength')" />
      <t-column field="isFromRecipeName" :title="$t('T9_isFromRecipeName')" />
      <t-column field="recipeFromValue" :title="$t('T9_recipeFromValue')" />
      <t-column field="recipeId" :title="$t('T9_recipeId')" />
      <t-column field="lastComment" :title="$t('T9_lastComment')" />
      <t-column field="lastEventName" :title="$t('T9_lastEventName')" />
      <t-column field="lastEventTime" :title="$t('T9_lastEventTime')" />
      <t-column field="valiResult" :title="$t('T9_valiResult')" />
      <t-column field="vailCode" :title="$t('T9_vailCode')" />
      <t-column field="lastEventUser" :title="$t('T9_lastEventUser')" />
    </t-table>
    <t-query-form
      layout="inline"
      ref="dataForm"
      :model="dataForm"
      class="footQueryForm"
    >
      <a-row :gutter="[16, 0]">
        <a-col :span="24">
          <a-form-item
            :label="$t('T9_comment')"
            name="comment"
            prop="comment"
            :rules="{
              required: true,
              message: $t('T9_comment'),
              trigger: 'change',
            }"
          >
            <a-input v-model:value="dataForm.comment" />
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2 endBtnArea"
    >
      <a-button class="endBtn" type="primary">{{
        $t("T9_generateRecipeId")
      }}</a-button>
      <a-button class="endBtn">{{ $t("T9_addOrUpdate") }}</a-button>
      <a-button class="endBtn">{{ $t("T9_delete") }}</a-button>
      <a-button class="endBtn">{{ $t("t9_toExcel") }}</a-button>
    </a-row>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { getRouteList, getOperation, getList } from '@/api/common'
  import { getProductId } from '@/api/viewShippedBoxPalletInformation'
  import { getRecipeName, getEqpList } from '@/api/recipeIdSetting'

  export default defineComponent({
    name: 'WipByOperationBoxPallet',
    components: {},
    data() {
      return {
        searchBtnLoading: false,
        shopIdArr: ['ARRAY', 'CELL', 'CF', 'ACC'],
        table: {
          recipeList: []
        },
        productTypeArr: [],
        productIdArr: [],
        routeArr: [],
        operationArr: [],
        recipeNameArr: [],
        consumableType: '',
        queryForm: {
          productType: '',
          productId: '',
          shopId: '',
          route: '',
          routeDsc: '',
          machineGroup: '',
          eqpId: '',
          operation: '',
          operationDsc: '',
          recipeName: ''
        },
        dataForm: {
          runState: '',
          waitState: '',
          others: ''
        }
      }
    },
    computed: {},
    watch: {},
    created() {},
    methods: {
      changeProductId(val) {
        this.productIdArr.forEach((item) => {
          if (item.productId === val) {
            this.queryForm.productVer = item.productVersion
          }
        })
        this.getRoute()
      },
      getRoute() {
        const params = {
          shopId: this.queryForm.shopId,
          productId: this.queryForm.productId,
          productType: this.queryForm.productVer
        }
        getRouteList(params).then((res) => {
          this.routeArr = res
        })
      },
      changeShopId() {
        const params = {
          shopId: this.queryForm.shopId
        }
        getProductId(params).then((res) => {
          this.productIdArr = res
        })
      },
      changeRoute(val) {
        console.log('val=', val)
        this.routeArr.forEach((item) => {
          if (item.route === val) {
            this.queryForm.routeDsc = item.version
          }
        })
        this.getOperation()
      },
      getEqpId() {
        const params = {
          operation: this.queryForm.operation,
          operationVer: this.queryForm.operationDsc,
          productId: this.queryForm.productId,
          productVer: this.queryForm.productVer,
          route: this.queryForm.route,
          routeVer: this.queryForm.routeDsc,
          shopId: this.queryForm.shopId
        }
        getEqpList(params).then((res) => {
          this.eqpIdArr = res
        })
      },
      getOperation() {
        const params = {
          shopId: this.queryForm.shopId
        }
        getOperation(params).then((res) => {
          this.operationArr = res
        })
      },
      changeOperation(val) {
        this.operationArr.forEach((item) => {
          if (item.description === val) {
            this.queryForm.operationDsc = item.processOperationVersion
          }
        })
        this.getEqpId()
      },
      getRecipeName() {
        const params = {
          eqpId: this.queryForm.eqpId,
          operation: this.queryForm.operation,
          operationVer: this.queryForm.operationVer,
          productId: this.queryForm.productId,
          productVer: this.queryForm.productVer,
          route: this.queryForm.route,
          routeVer: this.queryForm.routeVer,
          shopId: this.queryForm.shopId
        }
        getRecipeName(params).then((res) => {
          this.recipeNameArr = res
        })
      },
      getList() {
        const obj = {
          eqpId: this.queryForm.eqpId,
          operation: this.queryForm.operation,
          operationVer: this.queryForm.operationDsc,
          productId: this.queryForm.productId,
          productVer: this.queryForm.productVer,
          recipeName: this.queryForm.recipeName,
          route: this.queryForm.route,
          routeVer: this.queryForm.routeDsc,
          shopId: this.queryForm.shopId,
          dtoName: 'RecipeListDTO',
          version: '80037',
          queryId: 'GetRecipeList',
          menuName: 'recipeIdSetting',
          usage: 'getRecipeList'
        }
        getList(obj).then(res => {
          this.table.recipeList = res
        })
      }
    }
  })
</script>
<style lang="less" scoped>
/deep/ .ant-row,
.ant-row:after,
.ant-row:before {
  display: flex;
  flex: 1;
}
/deep/.mytable-style {
  .vxe-body--column.col-gray {
    background-color: #d8def5;
    color: rgba(4, 12, 44, 0.65);
  }
}
.inputArea{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.endBtnArea {
  justify-content: flex-end !important;
  .endBtn {
    margin-right: 10px;
  }
}
.footQueryForm {
  margin-top: 10px;
}
</style>
